//@ts-nocheck
import React, { useEffect, useRef, useState } from 'react'

import './index.less'
import { Tooltip } from 'antd'

interface IProps {
  data: Array<any>
}

const BubbleChart: React.FC<IProps> = ({ data }) => {
  const wrapperRef = useRef(null)

  const [xAxis, setXAxis] = useState([])

  const [dataList, setDataList] = useState([])

  const [yAxis, setYAxis] = useState([])

  useEffect(() => {
    let _xAxis = []
    let _dataList = []
    let _yAxis = []
    data.forEach((dataItem, dataIndex) => {
      if (dataIndex === 0) {
        _xAxis = dataItem.code.map((codeItem) => {
          return codeItem.label
        })
      }
      _dataList.push([
        ...dataItem.code.map((codeItem) => {
          return codeItem.code
        })
      ])
      _yAxis.push(dataItem.label)
    })
    setXAxis(_xAxis)
    setDataList(_dataList)
    setYAxis(_yAxis)
  }, [data])

  const [itemWidth, setItemWidth] = useState<number>(0)

  useEffect(() => {
    setItemWidth((wrapperRef.current.getBoundingClientRect().width - 276) / 7)
  }, [])

  return (
    <div className="buddle-chart" ref={wrapperRef}>
      <div className="buddle-content">
        <div className="table">
          {dataList.map((row, rowIndex) => {
            return (
              <div
                className="tr"
                key={rowIndex}
                style={{ marginBottom: rowIndex === data.length - 1 ? 31 : 54 }}
              >
                <div className="title">
                  <span>{yAxis[rowIndex]}</span>
                </div>
                {row.map((column, columnIndex) => {
                  return (
                    <div
                      className="td"
                      key={columnIndex}
                      style={{ width: columnIndex === row.length - 1 ? 0 : itemWidth }}
                    >
                      {rowIndex !== 0 && <div className="top-line" />}
                      {columnIndex !== row.length - 1 && <div className="right-line" />}

                      <div className="dot">
                        <Tooltip
                          placement="top"
                          title={column}
                          getPopupContainer={(triggerNode) => {
                            return triggerNode
                          }}
                        >
                          <div
                            className="dot-solid"
                            style={{
                              width: `${column < 10 ? 10 : column}%`,
                              height: `${column < 10 ? 10 : column}%`
                            }}
                          />
                        </Tooltip>
                      </div>
                    </div>
                  )
                })}
              </div>
            )
          })}
          <div className="tr">
            {xAxis?.map((item, index) => {
              return (
                <div
                  className="td"
                  key={index}
                  style={{ marginRight: index === xAxis.length - 1 ? 0 : itemWidth }}
                >
                  <span className="xaxis-name">{item}</span>
                </div>
              )
            })}
          </div>
        </div>
      </div>
    </div>
  )
}
export default (BubbleChart)
